<template>
  <div class="app-container">
    <div class="joe_main">
      <div class="joe_census__filing" style="margin-bottom: 20px">
        <div class="title">
          基本信息
        </div>
        <div class="content">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="Redis版本">
                    {{ redisBasicInfo.version }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="运行模式">
                    {{ redisBasicInfo.runMode }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="端口">
                    {{ redisBasicInfo.port }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="客户端数">
                    {{ redisBasicInfo.clientNum }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="运行时间(天)">
                    {{ redisBasicInfo.runTime }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="使用内存">
                    {{ redisBasicInfo.useMemory }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="使用CPU">
                    {{ redisBasicInfo.useCpu }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="内存配置">
                    {{ redisBasicInfo.memoryConfig }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="AOF是否开启">
                    {{ redisBasicInfo.aof === '0' ? '否' : '是' }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="RDB是否成功">
                    {{ redisBasicInfo.rdb }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="Key数量">
                    {{ redisBasicInfo.keyNum }}
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="网络入口/出口">
                    {{ redisBasicInfo.networkPortal }}kps/{{ redisBasicInfo.networkExport }}kps
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div>
<!--      <div class="joe_detail">-->
<!--        <h2 class="joe_detail__title">基本信息</h2>-->

<!--        <ul class="joe_census__basic">-->
<!--          <li class="joe_census__basic-item">-->


<!--            <div class="joe_census__filing" style="margin-bottom: 20px">-->
<!--              <div class="title">-->
<!--                命令统计-->
<!--              </div>-->
<!--              <div class="content">-->
<!--                <div id="command" style="width:100%;height: 400px;"/>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="joe_census__filing" style="margin-bottom: 20px">-->
<!--              <div class="title">-->
<!--                内存统计-->
<!--              </div>-->
<!--              <div class="content">-->
<!--                <div id="memoryChart" style="width:100%;height: 400px;"/>-->
<!--              </div>-->
<!--            </div>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->
      <div class="joe_census__filing" style="margin-bottom: 20px">
        <div class="title">
          磁盘状态
        </div>
        <div class="content">
          <a-table
            ref="table"
            row-key="id"
            size="middle"
            :columns="columns"
            :data-source="basicData"
            :pagination="false"
            :loading="loading"
            class="j-table-force-nowrap"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {getAction} from '@/api/manage'

export default {
  name: 'CacheMonitor',
  data() {
    return {
      chart: null,
      commandData: [],
      basicData: [],
      redisBasicInfo: {
        version: '',
        runMode: '',
        port: '',
        clientNum: '',
        runTime: '',
        useMemory: '',
        useCpu: '',
        memoryConfig: '',
        aof: '',
        rdb: '',
        keyNum: '',
        networkPortal: '',
        networkExport: ''
      },

      columns: [
        {
          title: 'key',
          dataIndex: 'key',
          align: 'center',
        },
        {
          title: 'value',
          dataIndex: 'value',
          align: 'center',
        },
      ],

    }
  },
  mounted() {
    this.getCommandData()
    this.getBasicData()
  },
  methods: {
    getCommandData() {
      getAction('/cache/info')
        .then((resp) => {
          this.commandData = resp.result.commandStats
          this.initCommandChart(resp.result.commandStats)
          this.redisBasicInfo.keyNum = resp.result.dbSize
        })
        .catch((resp) => {
          this.$message.error('加载失败！')
        })
    },
    getBasicData() {
      getAction('/actuator/redis/info')
        .then((resp) => {
          this.basicData = resp.result.table
          this.genRedisBasicInfo(resp.result.redisBasicInfo)
          this.initMemoryChart(resp.result.redisBasicInfo.useMemory)
        })
        .catch((resp) => {
          this.$message.error('加载失败！')
        })
    },
    genRedisBasicInfo(redisBasicInfo) {
      this.redisBasicInfo.version = redisBasicInfo.version
      this.redisBasicInfo.runMode = redisBasicInfo.runMode
      this.redisBasicInfo.port = redisBasicInfo.port
      this.redisBasicInfo.clientNum = redisBasicInfo.clientNum
      this.redisBasicInfo.runTime = redisBasicInfo.runTime
      this.redisBasicInfo.useMemory = redisBasicInfo.useMemory
      this.redisBasicInfo.useCpu = redisBasicInfo.useCpu
      this.redisBasicInfo.memoryConfig = redisBasicInfo.memoryConfig
      this.redisBasicInfo.aof = redisBasicInfo.aof
      this.redisBasicInfo.rdb = redisBasicInfo.rdb
      this.redisBasicInfo.keyNum = redisBasicInfo.keyNum
      this.redisBasicInfo.networkPortal = redisBasicInfo.networkPortal
      this.redisBasicInfo.networkExport = redisBasicInfo.networkExport
    },
    initCommandChart(commandData) {
      this.chart = echarts.init(document.getElementById('command'))
      var option = {
        // title图的标题，副标题，以及位置设置
        // title: {
        //   articleBody: '南丁格尔玫瑰图',
        //   subtext: '纯属虚构',
        //   x: 'center'
        // },
        tooltip: {
          trigger: 'item',
          // 提示框的数据样式显示
          formatter: '命令<br/>{b}：{c} ({d}%)'
        },
        /*
       * toolbox为工具栏；提供导出图片，数据转化，动态数据等信息
       * 保存图片
       */
        toolbox: {
          show: true, // 是否显示工具栏组件
          feature: {
            // 显示图像所提供的数据
            // dataView: {
            //   show: true, readOnly: false
            // },
            // 启用的动态数据类型
            magicType: {
              show: true,
              type: ['pie', 'funnel']
            }
            // // 配置项还原
            // restore: {
            //   show: true
            // },
            // // 保存为图片
            // saveAsImage: {
            //   show: true
            // }
          }
        },
        calculable: true, // 手柄拖拽调整选中的范围
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            roseType: 'area',
            x: '50%', // for funnel
            max: 40, // for funnel
            sort: 'ascending', // for funnel
            data: commandData
          }
        ]
      }
      this.chart.setOption(option)
      let _this = this
      // 浏览器大小改变时重置大小
      window.onresize = function () {
        _this.chart.resize()
      }

      // 容器大小改变时重置大小
      this.$nextTick(() => {
        _this.chart.resize()
      })
    },
    initMemoryChart(useMemory) {
      useMemory = useMemory.replace('K', '')
      this.chart = echarts.init(document.getElementById('memoryChart'))
      var option = {
        tooltip: {
          formatter: '{a} <br/>峰值 : {c}%'
        },
        series: [{
          name: '内存消耗',
          type: 'gauge',
          detail: {
            formatter: '{value}K'
          },
          max: 1000, // min max 控制仪表盘数值范围
          min: 0,
          data: [{
            value: useMemory,
            name: '内存消耗'
          }]
        }]
      }
      this.chart.setOption(option)
      let _this = this
      // 浏览器大小改变时重置大小
      window.onresize = function () {
        _this.chart.resize()
      }

      // 容器大小改变时重置大小
      this.$nextTick(() => {
        _this.chart.resize()
      })
    }
  }
}
</script>

<style scoped>
.el-divider {
  margin: 10px 0;
  background: 0 0;
  border-top: 1px solid #E6EBF5;
}

.box {
  width: 100%;
  height: 100%;
  /* 设置元素两端对齐 */
  text-align: justify;
}

/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */
.box:after {
  content: "";
  display: inline-block;
  overflow: hidden;
  width: 100%;
}

.title1, .title2, .title3 {
  margin-left: 2%;
  width: 13%;
  /* 设置盒子为行内块 */
  display: inline-block;
  font-size: 14px;
}

.value1, .value2, .value3 {
  width: 10%;
  /* 设置盒子为行内块 */
  display: inline-block;
  font-size: 14px;
}
</style>
<style>
.el-card__header {
  padding: 14px 20px 8px 20px !important;
}

.el-card__body {
  padding: 20px 20px 0px 20px !important;
}
</style>
